<!DOCTYPE html>
<html lang="zh">
<head>
    <title>修改个人信息</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="../asset/lib/layui/css/layui.css">
    <link rel="stylesheet" href="../asset/css/common.css">
    <script src="../asset/lib/jquery321.min.js"></script>
</head>
<body class="layui-layout-body">
<div class="layui-layout layui-layout-admin">
    <!-- 导入导航条 -->
    <div class="layui-header">
        <div class="layui-logo">个人信息管理中心</div>

        <ul class="layui-nav layui-layout-right">

            <li class="layui-nav-item">
                欢迎光临:&nbsp;&nbsp;<span id="span-nickname"></span>
            </li>
            <li class="layui-nav-item"><a onclick="logout()">注销</a></li>
        </ul>
    </div>
    <div class="layui-side layui-bg-black">
        <div class="layui-side-scroll">
            <!-- 左侧导航区域（可配合layui已有的垂直导航） -->
            <ul class="layui-nav layui-nav-tree">
                <li class="layui-nav-item">
                    <a href="userinfo.html">个人信息</a>
                </li>
                <li class="layui-nav-item layui-nav-itemed">
                    <a href="useredit.html">修改信息</a>
                </li>
                <li class="layui-nav-item">
                    <a href="pwdedit.html">修改密码</a>
                </li>
            </ul>
        </div>
    </div>
    <!-- END：导航条 -->
    <div class="layui-body layui-bg-gray">
        <!-- ===================================在这里编写HTML代码================================== -->
        <div class="layui-fluid">
            <div class="layui-row layui-col-space15">
                <div class="layui-card" pad15>
                    <div class="layui-card-header">个人中心</div>
                    <div class="layui-card-body">
                        <form class="layui-form" action="">
                            <div class="layui-form-item layui-col-md4">
                                <label class="layui-form-label">昵称</label>
                                <div class="layui-input-block">
                                    <input type="text" id="nickname-input" name="nickname" required
                                           lay-verify="required" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md3">
                                <label class="layui-form-label">性别</label>
                                <div class="layui-input-block">
                                    <input id="male-input" type="radio" name="gender" value="男" title="男">
                                    <input id="female-input" type="radio" name="gender" value="女" title="女">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md4">
                                <label class="layui-form-label">出生日期</label>
                                <div class="layui-input-block">
                                    <input type="text" autocomplete="off" class="layui-input" name="birthday"
                                           id="birthday-input"
                                           lay-verify="date">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md4">
                                <label class="layui-form-label">工作年限(年)</label>
                                <div class="layui-input-block">
                                    <input type="text" id="workYear-input" name="workYear"
                                           lay-verify="required|number" autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md3">
                                <label class="layui-form-label">婚姻状况</label>
                                <div class="layui-input-block">
                                    <input id="yesMarriage-input" type="radio" name="marriage" value="已婚" title="已婚">
                                    <input id="noMarriage-input" type="radio" name="marriage" value="未婚" title="未婚">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md3">
                                <label class="layui-form-label">学历</label>
                                <div class="layui-input-block">
                                    <select id="education-input" name="education" lay-filter="type">
                                        <option value="小学">小学</option>
                                        <option value="初中">初中</option>
                                        <option value="高中">高中</option>
                                        <option value="专科">专科</option>
                                        <option value="本科">本科</option>
                                        <option value="硕士">硕士</option>
                                        <option value="博士">博士</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md3">
                                <label class="layui-form-label">联系电话</label>
                                <div class="layui-input-block">
                                    <input type="text" id="contact-input" name="contact"
                                           lay-verify="required|phone|number"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item layui-col-md3">
                                <label class="layui-form-label">邮箱</label>
                                <div class="layui-input-block">
                                    <input type="text" id="email-input" name="email"
                                           lay-verify="required|email"
                                           autocomplete="off" class="layui-input">
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" lay-submit lay-filter="userEditSubmit">立即提交</button>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
        <!-- ================================END：在这里编写HTML代码================================ -->
    </div>
</div>
<!-- 导入代码库文件 -->
<script src="../asset/lib/layui/layui.js"></script>
<script src="../asset/js/layui-elem.js"></script>
<script src="../asset/js/core.js"></script>
<!-- END：代码库文件 -->
<!-- ================================在这里编写页面的js代码================================ -->
<script>
    //检查登录
    util.checkLogin();
    //读取用户信息
    var userInfo = util.data.get("userInfo");
    $('#span-nickname').text(userInfo.nickname);

    //表格信息回显
    $(function () {

        $('#nickname-input').val(userInfo.nickname);
        if (userInfo.gender) {
            if (userInfo.gender == '男') {
                $('#male-input').prop("checked", true);
            }
            if (userInfo.gender == '女') {
                $('#female-input').prop("checked", true);
            }
        }
        $('#birthday-input').val(userInfo.birthday);
        $('#workYear-input').val(userInfo.workYear);
        if (userInfo.marriage) {
            if (userInfo.marriage == '已婚') {
                $('#yesMarriage-input').prop("checked", true);
            }
            if (userInfo.marriage == '未婚') {
                $('#noMarriage-input').prop("checked", true);
            }
        }
        if (userInfo.education) {
            $('#education-input').val(userInfo.education);
        } else {
            $('#education-input').val('本科');
        }
        $('#contact-input').val(userInfo.contact);
        $('#email-input').val(userInfo.email);
    });

    //日期组件js
    layui.use('laydate', function () {
        var laydate = layui.laydate;
        laydate.render({
            elem: '#birthday-input' //指定元素
            //,value:'$//{userInfo.birthday}'
            , format: 'yyyy-MM-dd'
        });
    });

    layui.use('form', function () {
        var form = layui.form;

        //监听提交
        form.on('submit(userEditSubmit)', function (data) {
            var user = {
                "id": userInfo.id,
                "username": userInfo.username,
                "nickname": data.field.nickname,
                "gender": data.field.gender,
                "birthday": data.field.birthday,
                "workYear": data.field.workYear,
                "marriage": data.field.marriage,
                "education": data.field.education,
                "contact": data.field.contact,
                "email": data.field.email
            };
            // 保存更新
            layer.msg("正在提交", {
                icon: 16,
                time: 10000
            })
            util.httpRequest.post("../user/update", user, function (msg) {
                layer.closeAll();
                if (msg.code === 200) {
                    layer.msg('保存成功', {
                        offset: '50px'
                        , icon: 1
                        , time: 1000
                    });
                    //保存用户信息
                    util.data.set("userInfo", msg.result);
                    setTimeout(function () {
                        window.location.href = "userinfo.html";
                    }, 1000);
                } else {
                    layer.msg(msg.errorMessage, {
                        offset: '50px'
                        , icon: 2
                        , time: 2000
                    });
                }
            });
            return false;
        });
    });

    //注销登录
    function logout() {
        layui.use('layer', function () {
            util.data.remove("userInfo");
            util.httpRequest.get("../logout", {}, function (msg) {
                if (msg.code === 200) {
                    layer.msg('注销成功', {
                        offset: '50px'
                        , icon: 1
                        , time: 1000
                    });
                    //把登录用户数据保存到浏览器
                    setTimeout(function () {
                        window.location.href = "login.html";
                    }, 1000)
                } else {
                    layer.msg(msg.errorMessage, {
                        offset: '50px'
                        , icon: 2
                        , time: 2000
                    });
                }
            });
        });
    }
</script>
<!-- ================================END:在这里编写页面的js代码================================ -->
</body>
</html>
